<template>
  <el-dialog
  v-if="open"
    :title="title"
    :visible.sync="open"
    width="80%"
    append-to-body
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    class="dia-style"
    @closed="handleClose">
    <div class="screen-container">
      <!-- 搜索框 -->
      <hk-search-form
        :data="searchForm"
        :field-list="fieldList"
        :listTypeInfo="listTypeInfo"
        @handleEvent="handleEvent"
        @handleSearch="handleQuery"
        @handleReset="resetQuery" />
    </div>
    <hk-table
      :loading="loading"
      :table-data="tableList"
      :table-columns="tableFieldList"
      :show-pag="true"
      :show-index="true"
      :query-params="queryParams"
      rowkey="id"
      :total="total"
      :tableHeight="100"
      :show-overflow-tooltip="true"
      @changePage="changePage">
      <template #status="scope">
        <span :style="{ color: scope.row.status == 'death' ? 'red' : 'green' }">{{
          scope.row.status == 'death' ? '异常' : scope.row.status == 'alive' ? '正常' : ''
        }}</span>
      </template>
    </hk-table>
  </el-dialog>
</template>
<script>
import HkSearchForm from '@/components/HKSearchform'
import HkTable from '@/components/HKTable'
import { parseTime } from '@/utils/hongke.js'
import { getList, getDict } from '@/api/system/home.js'
export default {
  components: { HkSearchForm, HkTable },
  props: {
    title: {
      type: String,
      default() {
        return '详情'
      },
    },
    id: {
      type: String,
      default() {
        return ''
      },
    },
  },
  data() {
    return {
      open: false,
      searchForm: {
        times: 'day',
      },
      queryParams: {
        size: 10,
        current: 1,
      },
      defaultList: [
        { label: '组件', type: 'select', field: 'componentType', list: 'componentList' },
        { label: '运行状态', type: 'select', field: 'status', list: 'statusList' },
        { label: '检测时间', type: 'select', field: 'times', list: 'timeList' },
        { label: '', type: 'dateRange', field: 'date', class: 'isShow' },
      ],
      fieldList: [],
      listTypeInfo: {
        componentList: [],
        statusList: [
          { label: '正常', value: 'alive' },
          { label: '异常', value: 'death' },
        ],
        timeList: [
          { label: '近一日', value: 'day' },
          { label: '近一周', value: 'week' },
          { label: '近一月', value: 'month' },
          { label: '自定义', value: 'custom' },
        ],
      },
      //  列表信息
      tableList: [],
      tableFieldList: [
        { label: '组件名称', param: 'componentName' },
        { label: '运行状态', param: 'status', type: 'slot' },
        { label: '检测时间', param: 'createTime' },
        { label: '详情', param: 'detail' },
      ],
      loading: false,
      total: 1,
    }
  },
  mounted() {
    // this.handleEvent({ field: 'times', value: 'day' })
  },
  methods: {
    //  显示弹窗
    showDialog(param) {
      this.queryParams={
        current:1,
        size:10
      }
      this.handleEvent({ field: 'times', value: 'day' })
      this.open = true
      this.searchForm.componentType = param.componentType
      this.searchForm.status = param.status
      this.searchForm.times = 'day'
      this.getListData()
      getDict('component_type').then((res) => {
        this.listTypeInfo.componentList = res.map((i) => {
          return { label: i.dictLabel, value: i.dictVal }
        })
      })
    },
    //  获取数据
    getListData() {
      getList(
        Object.assign({}, this.queryParams, {
          componentType: this.searchForm.componentType,
          status: this.searchForm.status,
        })
      ).then((res) => {
        this.tableList = res.list
        this.total = res.total
      })
    },
    //  查询按钮
    handleQuery(val) {
      this.queryParams.current=1;
      this.searchForm = JSON.parse(JSON.stringify(val))
      this.getListData()
    },
    //  重置按钮
    resetQuery() {
      this.queryParams.startTime = ''
      this.queryParams.endTime = ''
      this.queryParams.current=1;
      this.getListData()
    },
    //  点击分页
    changePage(value) {
      this.getListData()
    },
    //  检测时间下拉框改变时触发
    handleEvent(param) {
      if (param.field == 'times') {
        if (param.value != 'custom') {
          this.fieldList = this.defaultList.filter((i) => {
            return i.class !== 'isShow'
          })
        } else {
          this.fieldList = this.defaultList
        }
        this.handleTimeRange(param.value)
      }
      if (param.field == 'date') {
        this.queryParams.startTime = parseTime(param.value[0])
        this.queryParams.endTime = parseTime(param.value[1])
      }
    },
    /** 三种时间区间选择*/
    handleTimeRange(value) {
      const end = new Date()
      const start = new Date()
      let nstart = null
      let nend = null
      switch (value) {
        case 'day':
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
          nstart = start.getTime()
          nend = end.getTime()
          this.queryParams.startTime = parseTime(nstart)
          this.queryParams.endTime = parseTime(nend)
          break
        case 'week':
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          end.setTime(end.getTime())
          nstart = start.getTime()
          nend = end.getTime()
          this.queryParams.startTime = parseTime(nstart)
          this.queryParams.endTime = parseTime(nend)
          break
        case 'month':
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          end.setTime(end.getTime())
          nstart = start.getTime()
          nend = end.getTime()
          this.queryParams.startTime = parseTime(nstart)
          this.queryParams.endTime = parseTime(nend)
          break
        default:
          break
      }
    },
    // time为某一天的时间戳
    setStartTime(time) {
      const nowTimeDate = new Date(time)
      return nowTimeDate.setHours(0, 0, 0, 0)
    },
    setEndTime(time) {
      const nowTimeDate = new Date(time)
      return nowTimeDate.setHours(23, 59, 59, 999)
    },
    //  关闭弹窗
    handleClose(){
      this.queryParams={
        current:1,
        size:10
      }
      this.open=false;
    }
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  height: 78vh;
  display: flex;
  flex-direction: column;
}
::v-deep .targetTable {
  flex: 1;
  overflow: auto;
}
::v-deep .el-table {
  margin-top: 0 !important;
}
.el-dialog__wrapper .el-form-item {
  margin-bottom: 0 !important;
}
::v-deep .el-range-input {
  background: transparent !important;
}
::v-deep .el-form-item {
  margin-bottom: 0 !important;
}
.tips {
  margin-left: 10px;
  border-left: 4px solid #1890ff;
}
</style>
